<template>
    <el-dialog width="850px" :visible.sync="dialogShow" :title="formData.id ? '修改' : '新增'">
        <el-form v-if="dialogShow" ref="form" :model.sync="formData" :rules="formRules">
            <el-row>
                <!-- 归属学科 -->
                <el-col :span="12">
                    <el-form-item label="归属学科" prop="subject_id">
                        <el-select clearable @change="changeHandler" v-model="formData.subject_id" size="small" placeholder="请选择归属学科">
                            <el-option v-for="item in treeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 归属目录 -->
                <el-col :span="12">
                    <el-form-item label="归属目录" prop="directory_id">
                        <el-select clearable v-model="formData.directory_id" size="small" placeholder="归属目录">
                            <el-option
                            v-for="item in directoryList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="13">
                    <el-form-item label="标签名称" prop="tag_name">
                        <el-input style="width:300px" size="small" v-model="formData.tag_name" placeholder="请输入标签名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item style="margin-left: -5px;" label="排序" prop="sort">
                        <el-input-number style="width:200px" v-model="formData.sort" @change="handleChange" :min="-20" :max="666"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否显示" prop="is_show">
                        <el-switch
                        v-model="formData.is_show"
                        active-color="#13ce66"
                        active-text="是"
                        inactive-text="否"
                        :active-value="1"
                        :inactive-value="2"
                        >
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="end">
            <el-button @click="cancel" size="small" >取消</el-button>
            <el-button @click="btnOk" size="small" type="primary">确啊确定</el-button>
        </el-row>
    </el-dialog>
</template>

<script>
import {addTagApi, editTagApi} from '@/api/tag'
export default {
    name: 'AddTag',
    props: {
        treeList: {
            type: Array,
            required: true
        },
        // directoryList: {
        //     type: Array,
        //     required:true
        // }
    },
    data() {
        return {
            dialogShow: false,
            formData: {
                directory_id: '',
                is_show: 1,
                sort: 1,
                subject_id: '',
                tag_name: ''
            },
            formRules: {
                subject_id: { required: true },
                directory_id: { required: true },
                tag_name: { required: true, message: '请输入', trigger: 'blur' },
                is_show: { required: true },
                sort: {required: true}
            },
            directoryList:[]
        };
    },

    mounted() {
        
    },

    methods: {
        /* 选择器 */ //筛选对应的子选择器依赖数组
        changeHandler(val) {
            console.log(val);
            if (val === '') {
                this.directoryList = []
                this.formData.directory_id = ''
            }
            this.formData.directory_id = ''
            this.treeList.forEach(item => {
                if (item.id === val) {
                    this.directoryList = item.children
                }
            })
        },
        //排序
        handleChange(val) {
            this.formData.sort = val
        },
        //取消
        cancel() {
            this.formData = {
                directory_id: '',
                is_show: 1,
                sort: 1,
                subject_id: '',
                tag_name: ''
            }
            this.dialogShow = false
        },
        //新增/修改
        async btnOk() {
            try {
                if (this.formData.id) {
                    //删除不需要的数组对象
                    delete this.formData.username
                    delete this.formData.subject_name
                    delete this.formData.directory_name
                    await this.$refs.form.validate()
                    await editTagApi(this.formData)
                    this.$message.success('修改成功啦O(∩_∩)O!')

                } else {
                    await this.$refs.form.validate()
                    await addTagApi(this.formData)
                    this.$message.success('新增成功啦O(∩_∩)O!')

                }
                this.dialogShow = false
                //通知父组件更新列表啦
                this.$emit('updateList')
            } catch (error) {
                console.log(error);
            }

        }
    }, 
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
 border-bottom: 1px solid #ebebeb;
}
</style>